<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vivo X70 Pro</title>
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/layout.css">
    <link rel="icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/detail.css">
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2805650_wxaz67v4o5.css"> -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/public.js"></script>
</head>

<body>
    <header></header>
    <script>
        $('header').load('./header.html')
    </script>
    <div id="app">
        <div class="content">
            <div class="con-title">
                <span>商城首页</span>
                <em>></em>
                <span>智能手机</span>
                <em>></em>
                <span style="color: #999;">X70 Pro</span>
            </div>
            <div class="con-body">
                <div class="con-base">
                    <div class="base-left">
                        <div style="position: static; left: 160px;">
                            <img src="./img/10006793_1630912070954_750x750.png" alt="">
                        </div>
                    </div>
                    <div class="base-right">
                        <div class="b-r-one">
                            <span id="pid" style="display: none;">10661</span>
                            <h1>vivo X70 Pro 12GB+256GB 独白</h1>
                            <p>
                                <span>
                                    【开售享: ①价值299元vivo无线耳机; ②高等级会员赠半年延保; ③价值6000元新机礼包; ④晒单有礼，符合要求返现30元】
                                </span>
                                蔡司专业影像|5000万像素微云台主摄|专业影像芯片 V1|全新萤石AG工艺
                            </p>
                            <div class="r-jg">￥<em>4799.00</em></div>
                            <div class="r-fk">
                                <span>商品支持:</span>
                                <span>花呗分期</span>
                                <span>以旧换新</span>
                                <span>积分抵换</span>
                            </div>
                        </div>
                        <dl class="b-r-two">
                            <dt class="dt-title">版本</dt>
                            <dd class="dd-content">
                                <ul>
                                    <li class="sku-item sku-item-checked">5G版 12GB+512GB</li>
                                    <li class="sku-item">5G版 8GB+512GB</li>
                                    <li class="sku-item">5G版 12GB+256GB</li>
                                    <li class="sku-item">5G版 8GB+256GB</li>
                                </ul>
                            </dd>
                            <dt class="dt-title">颜色</dt>
                            <dd class="dd-content">
                                <ul>
                                    <li class="sku-item"><span class="ys-1 ys"></span>独白</li>
                                    <li class="sku-item"><span class="ys-2 ys"></span>至黑</li>
                                    <li class="sku-item"><span class="ys-3 ys"></span>星云</li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="b-r-three">
                            <dt class="dt-title">选择套餐</dt>
                            <dd class="dd-content">
                                <ul>
                                    <li class="sku-item"><h2>官方标配</h2></li>
                                    <li class="sku-item"><h2>TWS 2套餐</h2><p>￥5249</p></li>
                                    <li class="sku-item"><h2>TWS 2e套餐</h2><p>￥5069</p></li>
                                    <li class="sku-item"><h2>手表套餐</h2><p>￥5898</p></li>
                                    <li class="sku-item"><h2>移动电源套餐</h2><p>4998</p></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="b-r-four">
                            <dt class="dt-title">数量</dt>
                            <dd>
                                <div>
                                    <label for="" class="dis jian">-</label>
                                    <input type="number" readonly="readonly" value="1" id="num">
                                    <label for="" class="jia">+</label>
                                </div>
                                <span>(仅购5件)</span>
                            </dd>
                        </dl>
                        <div class="b-r-last">
                            <div class="last-t">
                                <p class="price">￥4799</p>
                                <p class="info">
                                    已选： 5G版 12GB+256GB 独白 官方标配 1件
                                </p>
                            </div>
                            <div class="last-b">
                                <button class="jr">加入购物车</button>
                                <button class="lj">立即购买</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recommend">
                <div class="wrapper">
                    <div class="wra-t">配件推荐</div>
                    <div class="tab">
                        <span class="tab-left tab-del"><</span>
                        <span class="tab-right">></span>
                        <div class="tabs-con">
                            <ul></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
    <script>
        $('.footer').load('./footer.html')
    </script>
    <script src="./js/detail.js"></script>
</body>

</html>